<%@ page language="java" pageEncoding="UTF-8" import="java.util.List,com.hdl.entity.MallProduct"%><!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<jsp:include page="/head.jsp"></jsp:include>
</head>
<body>
	<jsp:include page="/cartLog.jsp"></jsp:include>
	<jsp:include page="/header.jsp"></jsp:include>

	<div class="m-header-banner m-list-header"
		style="background: url(assets/IMJ2V2/img/case-bg.jpg) 50% 0 no-repeat fixed;">
		<section class="am-container">
			<hgroup data-am-scrollspy="{animation:'slide-bottom', delay: 339}">
				<h2>美食点餐</h2>
				<p>总有一款是你喜欢的，那就赶紧加入购物车购买他吧</p>
			</hgroup>
		</section>
	</div>
           <%  int tpid = (int)request.getAttribute("tpid"); %>
	<nav class="m-cat-nav">
		<ul class="am-container" id="meishicenter">
			<%-- <li class="<%=tpid==1?"am-active":"" %>"><a href="javascript:;" name="1" onclick="productajax()"><i class="icon-chevron-right" ></i>锅底</a></li>
			<li class="<%=tpid==2?"am-active":"" %>"><a href="javascript:;" name="2" onclick="productajax()"><i class="icon-chevron-right"></i>唰菜</a></li>
			<li class="<%=tpid==3?"am-active":"" %>"><a href="javascript:;" name="3" onclick="productajax()"><i class="icon-chevron-right"></i>特色蘸料</a></li>
			<li class="<%=tpid==4?"am-active":"" %>"><a href="javascript:;" name="4" onclick="productajax()"><i class="icon-chevron-right"></i>小吃甜品</a></li>
			<li class="<%=tpid==5?"am-active":"" %>"><a href="javascript:;" name="5" onclick="productajax()"><i class="icon-chevron-right"></i>特色饮品</a></li> --%>
		</ul>
	</nav>
	
	
	<div class="am-container m-list">
		<article>
			<section class="m-case-list">
				<ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-3 am-thumbnails" id="typemp">
				<%List<MallProduct> mp = (List)request.getAttribute("mallproductlist");
				for(int i=0;i<mp.size();i++){
				    MallProduct pro=mp.get(i);%>
					
				<li>
						<figure class="effect-lily">
							<img src="assets/IMJ2V2/images/loading.gif" alt="<%=pro.getMallProductName() %>"
								data-echo="<%=pro.getMallProductPath()%>"
								class="am-img-responsive">
							<figcaption>
								<h1><%=pro.getMallProductName() %></h1>
								<p><%=pro.getMallProductMs() %></p>
								<a href="/hdl/mallproductshow.let?id=<%=pro.getMallProductId() %>"></a>
							</figcaption>
						</figure>
					</li>	
				
				<% }
				%>
					
				
				</ul>
			</section>
		</article>
	</div>

	<jsp:include page="/footer.jsp"></jsp:include>
</body>
</html>

<script>

$(function () {
	var ms=$("#meishicenter");
	
	
    $.get(
    		"type.let",
    		{},
    		function (data) {
			    $.each(data,function(i,obj){
			    	var c=obj.mallTypeId==${tpid}?"am-active":"";
			    	var li = "<li class='"+c+" m'><a onclick='productajax("+obj.mallTypeId+")'  class='mc' href='javascript:;' rel='nofollow'  name='"+obj.mallTypeId+"'>"+obj.mallTypeName+"</a></li>";
			    	ms.append(li);
			    	
			    })
			},"json"
    		)
	
	
});
    
 

    
     function productajax(i) {
	 	var ob = document.querySelectorAll(".m");//获取所有的li
	 	
	 	for(var j = 1;j<=5;j++){
	 		if(j == i){
	 			ob[i-1].classList.add("am-active");
	 		}else{
	 			ob[j-1].classList.remove("am-active");
	 		}
	 	}
    	
	    console.log($(this).parent());
	  
	     
	 
       var id=this.name;

       
       console.log("id="+i);
      
       $("#typemp").html("");
       
	   $.get(
	    		"malltype.let",
	    		{typeid:i},
	    		function (data) {
				    $.each(data,function(i,obj){
				    	var li = "<li><figure class='effect-lily'><img src='assets/IMJ2V2/images/loading.gif' alt='"+obj.mallProductName+"'data-echo='"+obj.mallProductPath+"' class='am-img-responsive'><figcaption><h1>"+obj.mallProductName+"</h1><p>"+obj.mallProductMs+"</p><a href='/hdl/mallproductshow.let?id="+obj.mallProductId+"'></a></figcaption></figure></li>";
				    	 $("#typemp").append(li);
				    	
				    })
				},"json"
	    		)
   	
};   
    
</script>